<template>
  <div class="restaurant-list">
    <Navbar />
    <h1>精选餐厅</h1>
    <el-row :gutter="20" class="restaurants-row">
      <el-col :span="6" v-for="(restaurant, index) in restaurants" :key="index" :class="{'col-md-6': isMobile}">
        <el-card shadow="hover" @click="navigateToRestaurant(restaurant.id)" class="restaurant-card">
          <div class="card-image-container">
            <img :src="restaurant.image" alt="餐厅图片" class="restaurant-image">
          </div>
          <div class="restaurant-info">
            <h3>{{ restaurant.name }}</h3>
            <p><i class="el-icon-location"></i> {{ restaurant.address }}</p>
            <p><i class="el-icon-star-on"></i> 评分: {{ restaurant.rating }}</p>
            <p><i class="el-icon-tickets"></i> 特色菜: {{ restaurant.featureDish }}</p>
          </div>
          <div class="overlay">
            <p>查看详情</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const isMobile = ref(window.innerWidth <= 768);
    window.addEventListener('resize', () => {
      isMobile.value = window.innerWidth <= 768;
    });

    // 增加更多餐厅
    const restaurants = ref([
      { id: 1, name: '美食天堂', address: '市中心商业区', image: 'https://img1.baidu.com/it/u=3694467961,2120749926&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1000', rating: 4.8, featureDish: '北京烤鸭' },
      { id: 2, name: '星空小屋', address: '郊区公园旁', image: 'https://img0.baidu.com/it/u=2587508774,2092054243&fm=253&fmt=auto&app=120&f=JPEG?w=749&h=500', rating: 4.5, featureDish: '意大利面' },
      { id: 3, name: '湖畔餐厅', address: '湖边风景区', image: 'https://img2.baidu.com/it/u=3073678029,2769107&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', rating: 4.7, featureDish: '鱼香肉丝' },
      { id: 4, name: '东方快车', address: '老城区古街', image: 'https://img1.baidu.com/it/u=1445574792,293706692&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', rating: 4.6, featureDish: '川味火锅' },
      { id: 5, name: '西雅图风情', address: '沿海步行街', image: 'https://img1.baidu.com/it/u=2462629838,1784748781&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', rating: 4.9, featureDish: '海鲜拼盘' },
      { id: 6, name: '田园时光', address: '乡村农庄', image: 'https://img1.baidu.com/it/u=3145677986,275432534&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', rating: 4.4, featureDish: '农家炖鸡' }
    ]);

    const navigateToRestaurant = (id) => {
      router.push({ name: 'restaurant-detail', params: { id } });
    };

    return {
      restaurants,
      navigateToRestaurant,
      isMobile
    };
  }
};
</script>

<style scoped>
.restaurant-list h1 {
  text-align: center;
  margin-bottom: 20px;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Neue', Arial, sans-serif;
  color: #2c3e50;
}

.restaurants-row {
  justify-content: center;
}

.restaurant-card {
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffcc99 0%, #ff9966 100%);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

.restaurant-card:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-image-container {
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.restaurant-image {
  width: 100%;
  height: auto;
  transition: opacity .3s ease;
}

.restaurant-info {
  padding: 10px;
  background-color: rgba(255,255,255,0.9);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: visibility .3s, opacity .3s ease;
}

.restaurant-card:hover .overlay {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  .restaurant-card {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>